<template>
	<div class="login">
		<div class="tabs">
			<div class="tab-item" :class="{ active: loginType === 'account' }" @click="switchLoginType('account')">
				账号密码登录
			</div>
			<div class="tab-item" :class="{ active: loginType === 'wechat' }" @click="switchLoginType('wechat')">
				微信授权登录
			</div>
		</div>
		<div class="form">
			<div v-show="loginType === 'account'">
				<!-- 账号密码登录表单 -->
				<div class="input-group">
					<input type="text" placeholder="请输入手机号或邮箱" v-model.trim="username" />
				</div>
				<div class="input-group">
					<input :type="passwordType" placeholder="请输入密码" v-model="password" />
					<div class="input-group-icon" @click="togglePassword">
						<i class="uni-icons">
							{{ passwordType === 'password' ? '&#xe651;' : '&#xe652;' }}
						</i>
					</div>
				</div>
			</div>
			<div v-show="loginType === 'wechat'">
				<!-- 微信授权登录按钮 -->
				<div class="wechat-login-btn" @click="wechatLogin">
					<uni-icons class="uni-icons" type="weixin" size="30"></uni-icons>
					<!-- <i ></i> -->
					微信登录
				</div>
			</div>
			<!-- 登录按钮 -->
			<button class="btn" :class="{ disabled: showError || loginDisabled }" :disabled="showError || loginDisabled"
				@click="handleLogin">
				登录
			</button>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				loginType: 'account', // 登录类型：account-账号密码登录，wechat-微信授权登录
				username: '', // 用户名（手机号或邮箱）
				password: '', // 密码
				passwordType: 'password', // 密码输入框的type属性，控制密码的显示和隐藏
				showError: false, // 是否显示错误提示
				loginDisabled: true, // 是否禁用登录按钮
			};
		},
		methods: {
			// 切换登录类型
			switchLoginType(type) {
				this.loginType = type;
				this.resetForm();
			},
			// 切换密码的显示和隐藏
			togglePassword() {
				this.passwordType = this.passwordType === 'password' ? 'text' : 'password';
			},
			// 清空表单数据
			resetForm() {
				this.username = '';
				this.password = '';
				this.passwordType = 'password';
				this.showError = false;
				this.loginDisabled = true;
			},
			// 检查表单数据是否合法
			validateForm() {
				// 省略表单数据校验逻辑
			},
			// 账号密码登录
			accountLogin() {
				// 省略账号密码登录逻辑
			},
			// 微信授权登录
			wechatLogin() {
				// 省略微信授权登录逻辑
			},
			// 处理登录操作
			handleLogin() {
				if (this.loginType === 'account') {
					// 账号密码登录
					this.accountLogin();
				} else {
					// 微信授权登录
					this.wechatLogin();
				}
			},
		},
	};
</script>
<style>
	.login {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 50rpx;
	}

	.tabs {
		display: flex;
		justify-content: center;
		margin-bottom: 40rpx;
	}

	.tab-item {
		font-size: 36rpx;
		padding: 20rpx 30rpx;
		cursor: pointer;
	}

	.tab-item.active {
		color: #333;
		background-color: #f5f5f5;
	}

	.form {
		width: 100%;
		max-width: 600rpx;
		padding: 30rpx;
		border-radius: 20rpx;
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
		background-color: #fff;
	}

	.input-group {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.input-group input {
		flex: 1;
		font-size: 32rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		border: 1rpx solid #ccc;
		outline: none;
	}

	.input-group-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 80rpx;
		height: 60rpx;
		margin-left: 10rpx;
		font-size: 36rpx;
		color: #999;
		border-radius: 10rpx;
		background-color: #f5f5f5;
		cursor: pointer;
	}

	.wechat-login-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #fff;
		border-radius: 10rpx;
		background-image: linear-gradient(to bottom, #00c800, #00a000);
		cursor: pointer;
	}

	.btn {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #fff;
		border-radius: 10rpx;
		background-image: linear-gradient(to bottom, #000, #000);
		cursor: pointer;
	}

	.btn.disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}
</style>
